<template>
  <van-popup :show="show" round @click-overlay="closeModal">
    <div class="py-4 px-6 bg-gray-100" v-if="!showchange">
      <div class="text-center font-bold">代理互转</div>
      <div class="my-4 text-sm bg-gray-200 p-2 border-2 border-white rounded-xl">
        我的币址： <span class="text-blue-600 font-bold">{{ getUserInfo.payment_address }}</span>
        <button
          @click="copy(getUserInfo.payment_address)"
          class="border text-sm bg-gray-200/60 px-1 rounded ml-1"
        >
          复制
        </button>
      </div>
      <div class="flex flex-col gap-2 bg-gray-200 p-2 border-2 border-white rounded-xl">
        <div>
          收款地址：<input
            v-model="formState.payment_address"
            class="border text-sm rounded text-gray-600 p-1"
            type="text"
          />
        </div>
        <div>
          转账金额：<input
            v-model="formState.amount"
            class="border text-sm rounded text-gray-600 p-1"
            type="text"
          />
        </div>
        <div>
          交易密码：<input
            v-model="formState.payment"
            class="border text-sm rounded text-gray-600 p-1"
            type="password"
          />
        </div>
      </div>

      <div class="flex justify-between mt-4">
        <button
          @click="closeModal"
          class="border border-white bg-green-300 text-white px-4 rounded-lg font-bold"
        >
          取消
        </button>
        <button
          @click="submit"
          class="border border-white bg-green-300 text-white px-4 rounded-lg font-bold"
        >
          确定
        </button>
      </div>
    </div>

    <div class="py-4 px-6 bg-gray-100" v-else>
      <div class="text-center font-bold">设置支付密码</div>

      <div class="flex flex-col gap-2 bg-yellow-200 p-2 border-2 border-white rounded-xl">
        <div>
          支付密码：<input
            v-model="formData.newPassword"
            class="border text-sm rounded text-gray-600 p-1"
            type="text"
          />
        </div>
        <div>
          二次确认：<input
            v-model="formData.confirmPassword"
            class="border text-sm rounded text-gray-600 p-1"
            type="text"
          />
        </div>
      </div>

      <div class="flex justify-between mt-4">
        <button
          @click="closeModal"
          class="border border-white bg-green-300 text-white px-4 rounded-lg font-bold"
        >
          取消
        </button>
        <button
          @click="submitPassword"
          class="border border-white bg-green-300 text-white px-4 rounded-lg font-bold"
        >
          确定
        </button>
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { onMounted, reactive, ref } from 'vue'
import { InterchangeApi, changePayPasswordApi } from '@/apis/user'
import { showConfirmDialog, showToast } from 'vant'
import { copy } from '@/utils/copy'
import { GetReminderInfo } from '@/utils/system'
defineProps({ show: Boolean })

const { getUserInfo } = useUserStore()
const formState = reactive({
  payment_address: '',
  amount: 0,
  payment: ''
})
const formData = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
const dialog = {
  text: '',
  content: ''
}
const showchange = ref(false)

async function submit() {
  showConfirmDialog({
    title: dialog.text,
    message: dialog.content
  })
    .then(() => {
      InterchangeApi(formState)
        .then(() => {
          showToast({ type: 'success', message: '操作成功' })
          closeModal()
        })
        .catch((res) => {
          if (res?.code === 204) {
            showToast({ type: 'fail', message: res.msg })
            showchange.value = true
          }
          return
        })
    })
    .catch(() => {
      console.log('取消')
    })
}

async function submitPassword() {
  if (formData.value.newPassword !== formData.value.confirmPassword) {
    showToast({ type: 'fail', message: '两次密码不一致' })
    return
  }

  try {
    await changePayPasswordApi({
      oldPassword: formData.value.oldPassword,
      newPassword: formData.value.newPassword
    })
  } catch (e) {
    showToast({ type: 'fail', message: e })
    return
  }

  showToast({ type: 'success', message: '操作成功' })
  showchange.value = false
}

onMounted(async () => {
  const { text, content } = await GetReminderInfo('app_Interchange_dialog')
  console.log(text, content)
  dialog.text = text
  dialog.content = content.replace(/(<([^>]+)>)/gi, '')
})

const emit = defineEmits(['close'])
function closeModal() {
  showchange.value = false
  emit('close')
}
</script>
